<link rel="import" href="../bower_components/polymer/polymer.html">

<script src="../lib/jquery-2.1.1.min.js"></script>
<script src="../lib/gl-matrix-2.2.0-min.js"></script>
<script src="../lib/webgl-utils.js"></script>
<script src="js/parseGcode.js"></script>
<script src="../js/RenderPath.js"></script>

<polymer-element name="jscut-parse-gcode" attributes="gcode parsedGcode">
    <script>
        Polymer('jscut-parse-gcode', {
            gcode: '',
            parsedGcode: [],
            gcodeChanged: function(oldValue, newValue) {
                this.parsedGcode = jscut.parseGcode({}, newValue);
            },
        });
    </script>
</polymer-element>

<polymer-element name="jscut-simulate-gcode" attributes="width height gcode parsedGcode cutterDiameter cutterAngle cutterHeight time1 time2 maxTime maxTimeRounded elementsUrl">
    <template>
        <canvas id="renderPathCanvas" width="{{width}}" height="{{height}}"></canvas>
    </template>
    <script>
        (function () {
            "use strict";
            var self;
            var renderPath;
            var filled = false;

            function fill() {
                if (filled) {
                    renderPath.fillPathBuffer(self.parsedGcode, 0, self.cutterDiameter, self.cutterAngle, self.cutterHeight);
                    self.maxTime = renderPath.totalTime;
                    self.maxTimeRounded = Math.ceil(renderPath.totalTime * 10) / 10;
                    self.time1 = self.maxTimeRounded;
                    self.time2 = self.maxTimeRounded;
                }
            }

            function timeChanged(oldValue, newValue) {
                if (renderPath)
                    renderPath.setStopAtTime(newValue);
            }

            Polymer('jscut-simulate-gcode', {
                width: 512,
                height: 512,
                gcode: '',
                parsedGcode: [],
                cutterDiameter: 0,
                cutterAngle: 180,
                cutterHeight: 0,
                time1: 0,
                time2: 0,
                maxTime: 0,
                maxTimeRounded: 0,
                elementsUrl: "elements",

                ready: function () {
                    self = this;
                    // Chrome 36: the ready event fires after this object's shadow-root is created,
                    // but before parent shadow-roots are created. That causes WebGL initialization to
                    // fail. requestAnimationFrame works around this. Firefox doesn't have this problem.
                    window.requestAnimationFrame(function () {
                        renderPath = startRenderPath({}, self.$.renderPathCanvas, null, self.elementsUrl + '/../js', function (renderPath) {
                            renderPath.fillPathBuffer(self.parsedGcode, 0, self.cutterDiameter, self.cutterAngle, self.cutterHeight);
                            self.maxTime = renderPath.totalTime;
                            self.maxTimeRounded = Math.ceil(renderPath.totalTime * 10) / 10;
                            self.time1 = self.maxTimeRounded;
                            self.time2 = self.maxTimeRounded;
                            filled = true;
                        });
                    });
                },

                gcodeChanged: function (oldValue, newValue) {
                    this.parsedGcode = jscut.parseGcode({}, newValue);
                    fill();
                },

                parsedGcodeChanged: fill,
                cutterDiameterChanged: fill,
                cutterAngleChanged: fill,
                cutterHeightChanged: fill,
                time1Changed: timeChanged,
                time2Changed: timeChanged,
            });
        })();
    </script>
</polymer-element>
